<template>
	<view class="registrationContent">
		<view class="wrap">
			<view class="wrapInput">
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="form1">

					<!-- <u-form-item label="昵称:" borderBottom>
						<u-input v-model="model1.nickname" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入昵称">
						</u-input>
					</u-form-item> -->
					<u-form-item label="真实姓名:" prop="userInfo.name" labelWidth="80" borderBottom>
						<u-input v-model="model1.name" placeholderStyle='color:#9E9E9E' inputAlign='right' border="none"
							placeholder="请输入真实姓名">
						</u-input>
					</u-form-item>
					<!-- <u-form-item label="所在企业:" labelWidth="80" borderBottom>
						<u-input v-model="model1.company" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入所在企业">
						</u-input>
					</u-form-item> -->

					<!-- <u-form-item label="性别:" borderBottom @click="showSex = true; hideKeyboard()">
						<u-input v-model="model1.sex" placeholderStyle='color:#9E9E9E' inputAlign='right'
							disabledColor="#ffffff" placeholder="请选择性别" border="none">
						</u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="邮箱:" borderBottom>
						<u-input v-model="model1.mailbox" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入邮箱">
						</u-input>
					</u-form-item> -->
					<u-form-item label="手机号码:" prop="model1.phone" labelWidth="80" borderBottom>
						<u-input v-model="userInfo.phone" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入手机号码">
						</u-input>
					</u-form-item>
					<u-form-item label="短信验证码:" prop="userInfo.code" labelWidth="100" borderBottom>
						<u-input v-model="model1.code" placeholderStyle='color:#9E9E9E' border="none" inputAlign='right'
							placeholder="请输入验证码"></u-input>
						<u-button slot="right" @tap="getCode" :text="tips" size="mini" :disabled="disabled1">获取验证码
						</u-button>
					</u-form-item>
					<u-form-item label="请设置密码:" prop="userInfo.password" labelWidth="100" borderBottom>
						<u-input v-model="model1.password" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请输入大于六位的密码">
						</u-input>
					</u-form-item>
					<u-form-item label="请确认密码:" prop="userInfo.nextPassword" labelWidth="100" borderBottom>
						<u-input v-model="model1.nextPassword" placeholderStyle='color:#9E9E9E' inputAlign='right'
							border="none" placeholder="请确认密码">
						</u-input>
					</u-form-item>

				</u-form>

				<view class="submit" @click="submitData">确认</view>
				<!-- <u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false"
					@select="sexSelect">
				</u-action-sheet> -->
				<u-code @change="codeChange" seconds="20" @start="disabled1 = true" @end="disabled1 = false"></u-code>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		phontRegister
	} from '@/utils/request.js'
	export default {
		data() {
			return {
					// showSex: false,
					// 		model1: {
					// 			userInfo: {
					// 				name: 'uView UI',
					// 				sex: '',
					// 			},
					// 		},
					// 		actions: [{
					// 			name: '男',
					// 			},
					// 			{
					// 				name: '女',
					// 			},
					// 			{
					// 				name: '保密',
					// 			},
					// 		],
					// 		rules: {
					// 			'userInfo.name': {
					// 				type: 'string',
					// 				required: true,
					// 				message: '请填写姓名',
					// 				trigger: ['blur', 'change']
					// 			},
					// 			'userInfo.sex': {
					// 				type: 'string',
					// 				max: 1,
					// 				required: true,
					// 				message: '请选择男或女',
					// 				trigger: ['blur', 'change']
					// 			},
					// 		},
					// 		radio: '',
					// 		switchVal: false,
				// showSex: false, //底部弹窗
				// actions: [{
				// 		name: '男',
				// 	},
				// 	{
				// 		name: '女',
				// 	}
				// ],
				userInfo: JSON.parse(uni.getStorageSync('userInfo') || {}),
				disabled1: false, //短信
				model1: {
					// nickname: '',
					// company: '',
					// sex: '',
					// mailbox: '',
					name: '',
					phone: '',
					code: '',
					password: '',
					nextPassword: '',
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						message: '请填写姓名',
					},
					'userInfo.phone': {
						type: 'number',
						message: '请输入手机号',
					},
					'userInfo.password': {
						type: 'string',
						message: '请输入密码',
					},
					'userInfo.nextPassword': {
						type: 'number',
						message: '再次确认密码',
					},
				},
			}
		},
		methods: {
			// 性别选择
			// sexSelect(e) {
			// 	this.model1.sex = e.name
			// 	this.$refs.form1.validateField('sex')
			// },
			hideKeyboard() {
				uni.hideKeyboard()
			},
			// 验证码
			codeChange(text) {
				this.tips = text;
			},			
			getCode() {
				if (!/^1[3-9]\d{9}$/.test(this.model1.phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						phone: this.model1.phone
					}
					this.sendCode(data).then(res => {
						uni.hideLoading();
						this.$refs.uCode.start();
						uni.showToast({
							title: '验证码10分钟内有效',
							icon: 'none',
							duration: 2000
						})
					}).catch(err => {})

					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

			// 确认提交
			submitData() {
				this.$refs.form1.validate().then(res => {
							if (!this.model1.name.trim()) {
								this.showLog('请输入姓名')
								return
							}
							if (!this.model1.phone.trim()) {
								this.showLog('请输入手机号')
								return
							}
							if (!this.model1.code.trim()) {
								this.showLog('请输入验证码')
								return
							}
							if (!this.model1.password.trim()) {
								this.showLog('请输入密码')
								return
							}
							if (this.model1.password != this.nextPassword) {
								this.showLog('两次密码不一致')
								return
							}
							let data = {
								token: this.userInfo.token,
								username: this.model1.name,
								phone: this.model1.phone,
								password: this.model1.password,
								code: this.model1.code,
							}
							this.phontRegister(data).then(res => {
								uni.navigateBack({
									delta: 1
								})
							}).catch(err => {})
						})
					},

					async sendCode(data) {
							return await sendCode(data)
						},

						async phontRegister(data) {
								return await phontRegister(data)
							},
							showLog(val) {
								uni.showToast({
									title: val,
									icon: 'none'
								})
							}
			}
		}
</script>

<style lang="scss">
	.registrationContent {
		padding: 0 25rpx;

	}

	.wrapInput {
		u--input {
			padding-right: 10rpx;
		}
	}

	.submit {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
		border-radius: 20rpx;
		margin: 60rpx auto 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 80rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.wrapBottom {
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;

		navigator {
			color: #353535;
		}
	}

	/deep/.item__body__right__content__icon>button {
		margin-left: 10rpx !important;
		background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%) !important;
		color: #FFFFFF !important;
	}

	/deep/.u-form-item__body__left {
		font-weight: bold;
	}
</style>
